// axios二次封装的请求插件
import axios from 'axios'
import store from '../store/index'
import router from '../router/index'
import { Loading, Message } from 'element-ui';
// 1.基本配置部分

// 设置前后端的post请求头类型  
// 表单类型      name=1&age=2&sex=男
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// json类型    {name:1,age:2}
// axios.defaults.post['Content-Type'] = 'application/json';

// 上传文件类型的请求头    formdata类型文件内容
// axios.defaults.post['Content-Type'] = 'mutipart/form-data';

let service = axios.create({
  // 服务地址或代理地址
  // 根据当前的开发环境判断 加载哪一个地址
  // process.env.NODE_ENV production开发模式
  // development生产模式
  baseURL: "/api",//axios请求的基本路径  
  timeout: 5000 //请求超时时间 

})
// 2. 请求拦截器配置 
// 本项目中的每一个接口都会进入当前请求拦截器
// 拦截是否登录 如果登录后 将token 自动携带到请求头
// 请求体大小限制
// 做一些全局的loading 效果
// 完成登录

service.interceptors.request.use(config => {
  //  config ==>url 请求路径 method 请求方式
  // cinfig.data  发送数据  headers 请求头
  // 如果vuex中 存储了token 将token 携带到请求头
  let token = localStorage.getItem("token") // 从localStorage获取token
  if (token) {
    // 将token 携带到请求头 以Authorization的方式验证
    config.headers.Authorization = "Bearer " + token

  }

  // 加载全局的loading
  Loading.service({
    lock: true,
    text: '加载...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  // 3---判断请求的发送的数据大小不可以超过5mb
  const requestObj = {
    url: config.url,
    data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
    time: new Date().getTime()
  }

  const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求的数据大小

  if (requestSize > 5 * 1024 * 1024) {
    Message.error("请求体大小不可以超过5mb")
    return
  }
  return config
})


// 3.响应拦截器配置
// 做公共提示   关闭全局的loading
// 做一些简单的数据返回的处理
service.interceptors.response.use(response => {
  // response---每个请求响应的数据
  if (response.status == 200) {
    // 关闭loading
    Loading.service().close()
    return response.data
  }
  if (response.status == "401") {
    // 如果没有权限 将用户跳转到登录
    Message.error("没有权限，请登录")
    router.push("/login")
  }
  if (response.status == "502") {
    // 提示用户后台宕机
    Message.error("后台服务器宕机，请稍后再试")
  }
  return response.data
})

// 4. 导出实例
export default service




// axios 二次封装的过程
// 1.创建一个axios实例 根据当前的开发环境配置全局的baseURL
// 配置全局请求超时时间
// 配置全局的post请求头类型

// 2.配置了请求拦截器
//      拦截是否登录 如果登录后 将token 自动携带到请求头
//     加载了全局的loading效果
// 3.配置了响应拦截器
//      根据响应的状态码做公共提示   关闭全局的loading
// 4. 导出axiois实例

